extends ../_layout

block active
  - sidebar_active = 'buttons.html'

block content
  mixin dropdown_button(type)
    // START button group
    .btn-group.mb-sm
      button.btn.dropdown-toggle(type='button', class="btn-#{type}", data-toggle="dropdown")
        = type
        span.caret
      ul.dropdown-menu(role='menu')
        li
          a(href='#') Action
        li
          a(href='#') Another action
        li
          a(href='#') Something else here
        li.divider
        li
          a(href='#') Separated link
    // END button group

  mixin dropdown_split(type)
    // START button group
    .btn-group
      button.btn(type='button', class="btn-#{type}") Action
      button.btn.dropdown-toggle(type='button', class="btn-#{type}", data-toggle="dropdown")
        span.caret
        span.sr-only= type
      ul.dropdown-menu(role='menu')
        li
          a(href='#') Action
        li
          a(href='#') Another action
        li
          a(href='#') Something else here
        li.divider
        li
          a(href='#') Separated link
    // END button group

  h3 Buttons
  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button colors
        .panel-body
          button.mb-sm.btn.btn-default(type='button') Default
          button.mb-sm.btn.btn-primary(type='button') Primary
          button.mb-sm.btn.btn-success(type='button') Success
          button.mb-sm.btn.btn-info(type='button') Info
          button.mb-sm.btn.btn-warning(type='button') Warning
          button.mb-sm.btn.btn-danger(type='button') Danger
          button.mb-sm.btn.btn-inverse(type='button') Inverse
          button.mb-sm.btn.btn-green(type='button') Green
          button.mb-sm.btn.btn-purple(type='button') Purple
          button.mb-sm.btn.btn-pink(type='button') Pink
          br
          br
          a(href="#").btn.btn-link Button Link
          button(type='button').btn.btn-default
            strong button tag
          | 
          a(href="#").btn.btn-default
            strong anchor tag
      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Labeled
        .panel-body
          // Success button with label 
          button.btn.btn-labeled.btn-success(type='button')
            span.btn-label
              i.fa.fa-check
            | Success
          // Danger button with label 
          button.btn.btn-labeled.btn-danger(type='button')
            span.btn-label
              i.fa.fa-times
            | Danger
          // Info button with label 
          button.btn.btn-labeled.btn-info(type='button')
            span.btn-label
              i.fa.fa-exclamation
            | Info
          // Warning button with label 
          button.btn.btn-labeled.btn-warning(type='button')
            span.btn-label
              i.fa.fa-warning
            | Warning
          br
          br
          // Standard button with label 
          button.btn.btn-labeled.btn-default(type='button')
            span.btn-label
              i.fa.fa-arrow-left
            | Left
          // Standard button with label on the right side 
          button.btn.btn-labeled.btn-default(type='button')
            | Right
            span.btn-label.btn-label-right
              i.fa.fa-arrow-right
      // END panel
  // END row
  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button sizing
        .panel-body
          .row
            .col-lg-6
              p
                button.btn.btn-primary.btn-lg(type='button') Large button
                button.btn.btn-default.btn-lg(type='button') Large button
              p
                button.btn.btn-primary(type='button') Default button
                button.btn.btn-default(type='button') Default button
            .col-lg-6
              p
                button.btn.btn-primary.btn-sm(type='button') Small button
                button.btn.btn-default.btn-sm(type='button') Small button
              p
                button.btn.btn-primary.btn-xs(type='button') Extra small button
                button.btn.btn-default.btn-xs(type='button') Extra small button
      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button group
        .panel-body
          p
          .btn-group
            button.btn.btn-default(type='button') Left
            button.btn.btn-default(type='button') Middle
            button.btn.btn-default(type='button') Right
          p
          p
          .btn-group
            button.btn.btn-default(type='button') 1
            button.btn.btn-default(type='button') 2
            button.btn.btn-default(type='button') 3
            button.btn.btn-default(type='button') 4
          .btn-group
            button.btn.btn-default(type='button') 5
            button.btn.btn-default(type='button') 6
            button.btn.btn-default(type='button') 7
          .btn-group
            button.btn.btn-default(type='button') 8
      // END panel
  // END row

  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Pills
        .panel-body
          p Pill left
          p
            button.btn.btn-pill-left.btn-default(type='button') Default
            button.btn.btn-pill-left.btn-primary(type='button') Primary
            button.btn.btn-pill-left.btn-success(type='button') Success
            button.btn.btn-pill-left.btn-info(type='button') Info
            button.btn.btn-pill-left.btn-warning(type='button') Warning
            button.btn.btn-pill-left.btn-danger(type='button') Danger
            button.btn.btn-pill-left.btn-inverse(type='button') Inverse

          p Pill right
          p
            button.btn.btn-pill-right.btn-default(type='button') Default
            button.btn.btn-pill-right.btn-primary(type='button') Primary
            button.btn.btn-pill-right.btn-success(type='button') Success
            button.btn.btn-pill-right.btn-info(type='button') Info
            button.btn.btn-pill-right.btn-warning(type='button') Warning
            button.btn.btn-pill-right.btn-danger(type='button') Danger
            button.btn.btn-pill-right.btn-inverse(type='button') Inverse

      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Oval
        .panel-body
          button.btn.btn-oval.btn-default(type='button') Default
          button.btn.btn-oval.btn-primary(type='button') Primary
          button.btn.btn-oval.btn-success(type='button') Success
          button.btn.btn-oval.btn-info(type='button') Info
          button.btn.btn-oval.btn-warning(type='button') Warning
          button.btn.btn-oval.btn-danger(type='button') Danger
          button.btn.btn-oval.btn-inverse(type='button') Inverse
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Square
        .panel-body
          button.btn.btn-square.btn-default(type='button') Default
          button.btn.btn-square.btn-primary(type='button') Primary
          button.btn.btn-square.btn-success(type='button') Success
          button.btn.btn-square.btn-info(type='button') Info
          button.btn.btn-square.btn-warning(type='button') Warning
          button.btn.btn-square.btn-danger(type='button') Danger
          button.btn.btn-square.btn-inverse(type='button') Inverse
      // END panel
  // END row

  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button dropdown
        .panel-body
          +dropdown_button('default')
          +dropdown_button('primary')
          +dropdown_button('success')
          +dropdown_button('info')
          +dropdown_button('warning')
          +dropdown_button('danger')
          +dropdown_button('inverse')
      // END panel

    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title.ellipsis Split button dropdown
        .panel-body
          +dropdown_split('default')
          +dropdown_split('primary')
          +dropdown_split('success')
          +dropdown_split('info')
          +dropdown_split('warning')
          +dropdown_split('danger')
          +dropdown_split('inverse')
      // END panel
  // END row

  // START panel
  .panel.panel-default
    .panel-heading
      h3.panel-title Button actions
    .panel-body
      // START row
      .row
        .col-lg-4
          h4 Single toggle
          button.btn.btn-primary(type='button', data-toggle='button', aria-pressed='false') Single toggle
        .col-lg-4
          h4 Checkbox
          .btn-group
            .btn-group(data-toggle='buttons')
              label.btn.btn-primary.active
                input(type='checkbox', checked='')
                |  Checkbox 1
              label.btn.btn-primary
                input(type='checkbox', )
                |  Checkbox 2
              label.btn.btn-primary
                input(type='checkbox', )
                |  Checkbox 3
        .col-lg-4
          h4 Radio
          .btn-group(data-toggle='buttons')
            label.btn.btn-primary.active
              input#option1(type='radio', name='options', checked='')
              |  Radio 1
            label.btn.btn-primary
              input#option2(type='radio', name='options', )
              |  Radio 2
            label.btn.btn-primary
              input#option3(type='radio', name='options', )
              |  Radio 3




  // START panel
  .panel.panel-default
    .panel-heading
      h3.panel-title Pagination
    .panel-body
      // START row
      .row
        .col-lg-6
          div
            h4 Sizes
            nav
              ul.pagination.pagination-lg.m0
                li
                  a(href='#', aria-label='Previous')
                    span(aria-hidden='true') &laquo;
                li.active
                  a(href='#') 1
                li
                  a(href='#') 2
                li
                  a(href='#') 3
                li
                  a(href='#') 4
                li
                  a(href='#') 5
                li
                  a(href='#', aria-label='Next')
                    span(aria-hidden='true') &raquo;
            nav
              ul.pagination.m0
                li
                  a(href='#', aria-label='Previous')
                    span(aria-hidden='true') &laquo;
                li
                  a(href='#') 1
                li
                  a(href='#') 2
                li.active
                  a(href='#') 3
                li
                  a(href='#') 4
                li
                  a(href='#') 5
                li
                  a(href='#', aria-label='Next')
                    span(aria-hidden='true') &raquo;
            nav
              ul.pagination.pagination-sm.m0
                li
                  a(href='#', aria-label='Previous')
                    span(aria-hidden='true') &laquo;
                li
                  a(href='#') 1
                li
                  a(href='#') 2
                li
                  a(href='#') 3
                li
                  a(href='#') 4
                li.active
                  a(href='#') 5
                li
                  a(href='#', aria-label='Next')
                    span(aria-hidden='true') &raquo;

        .col-lg-6
            h4 Pager
            nav
              ul.pager
                li.previous
                  a(href='#')
                    span(aria-hidden='true') &larr;
                    |  Older
                li.next
                  a(href='#')
                    | Newer 
                    span(aria-hidden='true') &rarr;
            nav
              ul.pager
                li
                  a(href='#') Previous
                li
                  a(href='#') Next




      // END row
  // END panel